'use strict';

define(function(require,exports,module){
	var React = require('react');
    var ReactAddons = require('reactAddons');

	var $ = require('jquery');

	var publicObj = require('lib/public');
    var token = publicObj.get_token();

	/*调用ApiColumnDiagram组件*/
	var ApiColumnDiagram = require('components/diagram/ApiColumnDiagram');

    //AllApiApiArea
    var AllApiAreaBasic = require('components/diagram/AreaDiagram/AllApiAreaBasic');
	
	/*URL下拉框*/
	var SelectOptionUrl = require('components/partial/SelectOptionUrl');
	
	/*DATE下拉框*/
	var SelectOptionDate = require('components/partial/SelectOptionDate');

    /*时间段图表*/
    var TimeBucket = require('./ApiDiagram/TimeBucket');

    var PureRenderMixin = ReactAddons.addons.PureRenderMixin;

    /*Loading*/
    var ReactLoading = require('../partial/ReactLoading');
	
	module.exports = React.createClass({displayName: "exports",
		mixins:[PureRenderMixin],
		handleDateChange:function(event){
			var date = event.target.value;
			this.setState({'date':date});
            this.setState({url:''});
			this.loadDateDiagramData(date);
            this.loadDateDiagramDataItem(date,this.state.url);
		},
		handleApiChange:function(event){
			var url = event.target.value;
            if(this.isMounted()){
                this.setState({url:url});
                this.loadDateDiagramDataItem(this.state.date,url);
            }
		},
		getInitialState:function(){

            //API总掉用量
            var date = new XDate().addDays(-20).toString("yyyyMMdd");
            var sql = "SELECT sum(count) as value,YYYYMMDD as name\
                        FROM qeeniao.api_call_summary\
                        where YYYYMMDD >= "+date+"\
                        group by YYYYMMDD\
                        order by YYYYMMDD ASC";
			return {
				data:[],
				date:'',
                url:'',
				api_data:[],
				diagram_data:[],
                all_diagram_data:[],
                'ajax_data':{'sql':sql,'access_token':token}
			}
		},
		loadDateDiagramData:function(date){
			var sql = "select YYYYMMDD as date,url,autokid from qeeniao.api_call_summary where YYYYMMDD = '"+date+"' and url <> '/' group by url";
			var tmp_data = [];

			$.ajax({
				url:this.props.url,
				data:{sql:sql,'access_token':token},
				type:'post',
				dataType:'json',
				success:function(o){
					var tmp_data = [];
					if(o){
                        if(this.isMounted()) {
                            this.setState({'api_data': o});
                        }
					}

				}.bind(this),
				error:function(xhr,status,err){
					console.error(sql,status,err.toString());
				}.bind(this)
			});
			
		},
		loadDateDiagramDataItem:function(date,url){
            if(date && url){
                this.setState({diagram_data:[]});
                var sql = "select count as value,HH as time from qeeniao.api_call_summary where YYYYMMDD = '"+date+"' and url = '"+url+"'";

                $.ajax({
                    url:this.props.url,
                    data:{sql:sql,'access_token':token},
                    type:'post',
                    dataType:'json',
                    success:function(o){
                        var push_data = {};
                        push_data['id'] = '9999';
                        push_data['id_name'] = 'diagram_9999';
                        push_data['title'] = url;
                        push_data['date'] = date;
                        push_data['item'] = o;
                        var tmp = [];
                        tmp.push(push_data);
                        if(this.isMounted()) {
                            this.setState({'diagram_data': tmp});
                        }
                    }.bind(this),
                    error:function(xhr,status,err){
                        console.error('获取数据失败!',status,err.toString());
                    }.bind(this)
                })
            }else{
                this.setState({'diagram_data':[]});
            }

		},
        createHandle:function(){
            $('#TimeBucket').modal();
        },
		render:function(){
            var diagram;
            if(this.state.diagram_data.length > 0){
                diagram = this.state.diagram_data.map(function(item){
                    return (
                        React.createElement(ApiColumnDiagram, {className: "", yName: "调用量", yUnit: "（次/小时）", id: item.id, id_name: item.id_name, title: item.title, url: "", data: item.item})

                    );
                });
            }else{
                diagram = React.createElement(AllApiAreaBasic, {className: "", id: "ApiAreaDiagram", id_name: "ApiAreaDiagram", y: "调用量", title: "API总调用量", ajax_data: this.state.ajax_data, url: this.props.url, interval: "300000"})
            }


			return (
                React.createElement("div", {className: "col-xs-6"}, 
                    React.createElement("div", {className: "row bgwhite"}, 
                        React.createElement("div", {className: "col-xs-3 bs-callout bs-callout-info"}, 
                            React.createElement("h4", null, "API调用量:")
                        ), 
                        React.createElement("div", {className: "col-xs-3 "}, 
                            React.createElement(SelectOptionDate, {handleDateChange: this.handleDateChange, data: this.props.data})
                        ), 
                        React.createElement("div", {className: "col-xs-3"}, 
                            React.createElement(SelectOptionUrl, {selectValue: this.state.url, handleApiChange: this.handleApiChange, data: this.state.api_data})
                        ), 
                        React.createElement("div", {className: "col-xs-3", style: {margin:'4px 0'}}, 
                            React.createElement("button", {onClick: this.createHandle, className: "btn btn-primary btn", "data-toggle": "modal", "data-target": "#TimeBucket"}, "更多")
                        ), 
                        React.createElement(TimeBucket, {id: "TimeBucket", url: this.props.url})
                    ), 
                    React.createElement("div", {className: "row"}, 
                    diagram
                    )
                )
            );
		}
	});

});